<template>
  <div class="tabs">
    <div>
      <el-button type="text" icon="el-icon-caret-left" @click="handleScroll('left')"></el-button>
    </div>

    <div class="tab" ref="scrollOut">
      <div class="tab-in" ref="scrollBody" :style="{ left: scrollLeft + 'px'}">
       <!-- <transition-group> -->

         <!-- <template v-if="tabs.length == 1">
            <el-tag
            type=""
            effect="plain"
            :name="0"
            :key="tabs[0]['path']"
            >{{ tabs[0]['title'] }}</el-tag>

          </template> -->

          <template>
            <el-tag
            v-for="(item, index) in tabs"
            effect="plain"
            :closable="index=='0'?false:true"
            :type="item.selected ? '': 'info'"
            :key="item['path']"
            :name="item['path']"
            @close="closeTab(index)"
            @click="changeTab(item['path'])"
            >{{ item['title'] }}</el-tag>
          </template>

       <!-- </transition-group> -->
      </div>
    </div>

    <div>
      <el-button type="text" icon="el-icon-caret-right" @click="handleScroll('right')"></el-button>
    </div>

    <div class="tab-close-all">
      <el-dropdown placement="bottom-end" @command="tabsHandle">
        <el-button type="text" icon="el-icon-error"></el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="all">关闭所有</el-dropdown-item>
          <el-dropdown-item command="other">关闭其它</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      scrollLeft: 5,
      tabs:[{path: "/dashboard",selected: false,title: "首页"}]
    }
  },
  mounted() {
    this.newpage();
  },
  methods:{
    newpage(){
      let path = this.$route;
      //console.log(path);
      let a = 1
      for(let i=0;i<this.tabs.length;i++){
        if(this.tabs[i].path==path.fullPath){
          a = 0;
        }
      }
      a && this.tabs.push({title:path.meta.title,path:path.fullPath,selected:true});
      for(let i =0;i<this.tabs.length;i++){
        if(this.tabs[i].path==path.path){
          this.tabs[i].selected = true;
        }else{
          this.tabs[i].selected = false;
        }
      }
    },
    /*		关闭标签页下拉菜单处理函数		*/
    tabsHandle(name) {
      var tabs = this.tabs
      var news = [];
      if (name == 'all') {

        this.tabs = [{title:'首页',path:'/dashboard',selected:true}];

        if ('/dashboard' != this.$route.path) {
          this.$router.replace('/dashboard')
        }
      } else {
        for (var i = 0; i < tabs.length; i++) {
          if (tabs[i]['selected']) {
            news.push(tabs[i])
            break
          }
        }
        this.tabs = news;
      }
    },
    /*		关闭标签页下拉菜单处理函数		*/
    /*		关闭选中的标签页		*/
    closeTab(name) {
      var tabs = this.tabs
      var next = name + 1
      var prev = name - 1
      var target = ""
      if (tabs[next] != undefined) {
        target += tabs[next]['path']
      } else {
        target += tabs[prev]['path']
      }
      this.tabs.splice(name, 1);
      if (target != this.$route.path) {
        this.$router.replace(target)
      }
    },
    /*		关闭选中的标签页		*/
    /*		改变选中的标签页		*/
    changeTab(path) {
      this.$router.replace(path);
    },
    /*		改变选中的标签页		*/
    /*		点击标签页的左右滚动按钮		*/
    handleScroll(direction) {
      var outWidth = this.$refs.scrollOut.offsetWidth
      var bodyWidth = this.$refs.scrollBody.offsetWidth

      var step = 200

      if (direction == 'right') {
        //	往右
        if (bodyWidth > outWidth) {
          if (Math.abs(this.scrollLeft) + outWidth + Math.abs(step) >= bodyWidth) {
            this.scrollLeft = outWidth - bodyWidth - 5
          } else {
            this.scrollLeft -= step
          }
        }
      } else {
        //	往左
        if (this.scrollLeft + step > 0) {
          this.scrollLeft = 5
        } else {
          this.scrollLeft += step
        }
      }
    }
  },
  watch:{
    	"$route":"newpage"
  }
}
</script>

<style lang="scss" scoped>
  .tabs .el-button--text {
      padding-left: 20px;
      padding-right: 20px;
      color: #888;
  }
  .tab-in {
      position: absolute;
      top: 0;
      white-space: nowrap;
      transition: all .4s ease;
  }
  .tab {
      flex-grow: 1;
      border-right: 1px solid #eee;
      position: relative;
      overflow: hidden;
  }
  .tabs {
      display: flex;
      flex-direction: row;
      line-height: 38px;
      justify-content: space-between;
      border-bottom: 1px solid #eee;
      margin:0 -15px;
      border-top: 1px solid #eee;
      .el-tag{
        cursor: pointer;
      }
  }
  .tab-in .el-tag {
      margin-right: 5px;
      cursor: pointer;
  }
  .el-tag+.el-tag {
      margin-left: 10px;
  }
  .tab {
      flex-grow: 1;
      border-right: 1px solid #eee;
      position: relative;
      overflow: hidden;
  }
  .tab, .tab-close-all {
      border-left: 1px solid #eee;
  }

</style>
